<template>
    <div class="warp-box">
    <!-- <el-row class="search-box" :gutter="10">
      <el-col :span="5">
        <el-select style="width:100%" v-model="value" size="small" placeholder="产品板块">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select style="width:100%" v-model="value" size="small" placeholder="产品名称">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select style="width:100%" v-model="value" size="small" placeholder="产品状态">
            <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
      </el-col>
      <el-col :span="9">
        <el-date-picker
            v-model="value2"
            type="monthrange"
            align="right"
            size="small"
            unlink-panels
            range-separator="～"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="pickerOptions">
        </el-date-picker>
        <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row> -->
    <el-row class="main-box channel1234" style="margin:10px -5px;">
        <el-col :span="24">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建产品</el-button>
            <el-button size="small" @click="handleAddType">新建产品组合</el-button>
        </el-col>
        <el-col :span="24">
            <el-table
            :data="dataList"
            border
            v-loading="loading"
            :row-class-name="tableRowClassName"
            style="margin-top:14px;"
            >
            <el-table-column fixed="left" show-overflow-tooltip prop="productName" label="产品名称"></el-table-column>
            <el-table-column
                show-overflow-tooltip
                width="300"
                prop="providerName"
                label="产品环节"
            >
               <template slot-scope="scope">
                    <span v-if="scope.row.productLink">{{scope.row.productLink.desc}}</span>
                </template> 
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="process" label="环节说明"></el-table-column> -->
            <el-table-column show-overflow-tooltip prop="onSale" label="产品状态">
                <template slot-scope="scope">
                    <span>{{scope.row.onSale?'已上架':'未上架'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="contactName" label="产品价格">
                <template slot-scope="scope">
                    <span>{{scope.row.lowerPriceLimit}}-{{scope.row.upperPriceLimit}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productUnit" label="产品单位">
                <template slot-scope="scope">
                    <span v-if="scope.row.productUnit">{{scope.row.productUnit.desc}}</span>
                </template>
            </el-table-column>
             <el-table-column prop="createDate" label="创建时间">
                <template slot-scope="scope">
                    <span>{{scope.row.createDate | formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column width="80" align="center" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="handleEdit(scope.row)" size="mini" type="text" icon="el-icon-edit"></el-button>
                    <a-popconfirm
                    title="是否确认删除?"
                    @confirm="handleDelete(scope.row)"
                    okText="是"
                    cancelText="否">
                        <el-button @click.stop="" size="mini" type="text" icon="el-icon-delete"></el-button>
                    </a-popconfirm>
                </template>
            </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <addDialog :addData="addData" @checkRender="checkRender"></addDialog>
    <productTeam :productTeamData="productTeamData"></productTeam>
  </div>
</template>

<script>
import addDialog from './addServerProduct' //新增修改产品
import productTeam from './addProductTeamDialog' //新增产品组合
export default {
    data() {
        return {
            loading: false,
            parames: {

            },
            dataList: [],
            options: [],
            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                    picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date(new Date().getFullYear(), 0);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 6);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            addData: {
                title: '',
                id: '',
                type: '',
                data: {},
                show: false
            },
            productTeamData: {
                show: false
            },
            value2:'',
            
        };
    },
    mounted() {
        this.render()
    },
    methods: {
        handleAdd () { //新增产品
            this.addData.title = "新增产品"
            this.addData.type = "new"
            this.addData.show = true
        },
        handleEdit (row) { //修改产品
            this.addData.title = "编辑产品"
            this.addData.id = row.id
            this.addData.type = "edit"
            this.addData.show = true
        },
        handleDelete (row) { //删除产品
            this.$post(this.$api.postProviderProductDel,{
                providerProductId: row.id
            }).then(response => {
                if (response.data.succeed) {
                    setTimeout(() => {
                        this.render()
                    }, 200);
                }
            })
        },
        handleAddType () { //新增产品组合
            this.productTeamData.show = true
        },
        checkRender () {
            this.render()
        },
        handleSearch () {
            this.render()
        },
        render () { //获取所有服务商产品
            this.loading = true
            this.$post(this.$api.postProviderProductList,this.parames).then(response => {
                if (response.data.succeed) {
                    this.dataList = response.data.data
                    setTimeout(() => {
                        this.loading = false
                    }, 200);
                }
            })
        },
        tableRowClassName({ row, rowIndex }) {
        //斑马表格
        if (rowIndex % 2 === 1) {
            return "warning-row";
        } else {
            return "success-row";
        }
        return "";
        }
    },
    components: {
        addDialog,
        productTeam
    },
};
</script>

<style scoped>

</style>
